<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例_图书管理_获取数据</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <style>
        :root {
            font-size: 15px;
        }

        body {
            padding-top: 15px;
        }
    </style>
</head>

<body>
    <!-- 栅格系统 -->
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <h1>图书管理</h1>
            <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addModal" id="myAddBtn">添加</button>
        </div>
        <table class="table table-bordered table-striped table-dark table-hover text-center">
            <thead>
                <!-- 表头行 -->
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">书名</th>
                    <th scope="col">作者</th>
                    <th scope="col">出版社</th>
                    <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <!-- 表格中的每一行 -->
                <!-- <tr>
                    <th scope="row">xxx</th>
                    <td>xxx</td>
                    <td>xxx</td>
                    <td>xxx</td>
                    <td>
                        <button type="button" class="btn btn-link btn-sm btn-delete">删除</button>
                        <button type="button" class="btn btn-link btn-sm btn-update">编辑</button>
                    </td>
                </tr> -->
            </tbody>
        </table>
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
    <script>
        // 删除功能有问题，伟大的程序员，请你找出来
        document.querySelector('#tbody').addEventListener('click', (e) => {
            if(e.target.className === 'btn btn-link btn-sm btn-delete '){
                const id = e.target.dataset.id
                axios({
                    url: 'http://ajax-api.itheima.net/api/books' + id,
                    method: 'DELETE'
                }).then(res => {
                    render()
                })
            }
        })

        // 查询并显示
        function render(){
            axios({
                url: 'http://ajax-api.itheima.net/api/books',
                method: 'GET'
            }).then(res => {
                // console.log(res.data.data)
                const books = res.data.data
                // 显示图书
                let str = ''
                books.forEach(ele => {
                    str += `
                        <tr>
                            <th scope="row">${ele.id}</th>
                            <td>${ele.bookname}</td>
                            <td>${ele.author}</td>
                            <td>${ele.publisher}</td>
                            <td>
                                <button type="button" data-id="${ele.id}" class="btn btn-link btn-sm btn-delete">删除</button>
                                <button type="button" class="btn btn-link btn-sm btn-update">编辑</button>
                            </td>
                        </tr>
                    `
                })
                // console.log(str)
                // 显示
                document.querySelector('#tbody').innerHTML = str
            })
            
        }
        render()

        </script>
</body>

</html>